<template>
  <transition>
    <div class="filter-container" :class="{ fold: !show3 }">
      <el-row v-for="chose in courseList" v-model="show3">
        <el-col :span="2">
          <div class="grid-content ep-bg-purple npm">
            {{ chose.label }}&nbsp;&nbsp;:
          </div>
        </el-col>
        <el-col :span="22">
          <div
            class="grid-content ep-bg-purple-light course_btn course_msg"
            @click="onClick(chose.choises, chosemsg, chose.name)"
            :class="{ 'is-active': chosemsg.isActive }"
            v-for="chosemsg in chose.choises"
          >
            {{ chosemsg.name }}
          </div>
        </el-col>
      </el-row>
    </div>
  </transition>
  <el-link :underline="false" class="open" @click="show3 = !show3"
    ><span>{{ show3 ? "收起" : "展开全部" }}</span>
    <!--      <span v-if="open">收起</span><span v-else>展开全部</span>-->
  </el-link>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";

const props = defineProps(["courseList", "getVideoList"]);
//   const open = ref(false) //控制展开
//   const collapseName = ref('down')
const show3 = ref(true);

//   const filterInfo = ref([]) //  整个数组
//   const filterCode = ref('') // 名称--兴趣爱好
//   const filterValue = ref([]) // 具体的选项-- 古典舞 民族舞
//   // 初始化数据
//   const initFilterMsg = () => {
//     const filterInfo = ref([]) //  整个数组
//     const filterCode = ref('') // 名称--兴趣爱好
//     const filterValue = ref([]) // 具体的选项-- 古典舞 民族舞
//   }

// 点击筛选条件
const onClick = (choises: any, chosemsg: any, choseName: any) => {
  // console.log('chosemsg',chosemsg)
  if (!chosemsg.isActive) {
    let activeList = choises.filter((item: any) => item.isActive);
    if (activeList.length >= 3) return ElMessage("同一筛选条件最多选择3个");
  }
  chosemsg.isActive = !chosemsg.isActive;
  props.getVideoList();
};
// 展开/折叠
//   const collapse = () => {
//     if (open.value) {
//       collapseName.value = 'down'
//     } else {
//       collapseName.value = 'up'
//     }
//     setTimeout(() => {
//       open.value = !!!open.value
//     }, 50)

//   }
</script>

<style scoped>
.demo-collapse {
  width: 1200px;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.el-col-2 {
  color: #7d8090;
}
.filter-container {
  overflow: hidden;
}
.filter-container.fold {
  height: 155px;
}
.grid-content {
  border-radius: 4px;
  margin-top: 6px;
}
.course_btn {
  float: left;
  margin-right: 24px;
  color: #7d8090;
  font-size: 14px;
}
.course_label {
  padding: 7px 0;
  color: #b1b5c1;
  font-weight: 100;
}
.course_msg {
  font-size: 14px;
  color: #7d8090;
  padding: 7px 13px;
  margin: 0 24px 10px 0;
  cursor: pointer;
}
.course_msg.is-active {
  background-color: #f93684;
  color: #fff;
}
.open {
  padding: 20px 0;
  text-align: center;
  width: 100%;
  color: #f93684;
  cursor: pointer;
}
.up {
  max-height: 1200px;
  transition: max-height 1s linear;
}
.down {
  max-height: 100px;
  transition: max-height 0.5s linear;
}
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
